<template>
	<view class="page-container">
		<scroll-view scroll-y="true" class="scroll-view">
			<view class="normal-login-container">
				<div class="content-container">
					<!-- 轮播图 -->
					<swiper class="swiper" :autoplay="true" :interval="3000" :duration="500" :circular="true">
						<swiper-item v-for="(item, index) in swiperList" :key="index">
							<image :src="item.activity_banner_path" mode="aspectFill" class="swiper-image"></image>
						</swiper-item>
					</swiper>

					<!-- 收藏 -->
					<div class="mox">
						<div class="tom">
							<div>ID：{{ data.activity_id ? data.activity_id :0 }}</div>
							<div>浏览量：{{ data.browse_number ?data.browse_number :0 }}</div>
							<div>收藏：{{ data.collect_number ?data.collect_number:0 }}</div>
						</div>
						<div>
							<img v-if="!data.is_collect" class="collect-icon" src="https://shalong.taiyanyue.top/images/antOutline-star2.png"
								alt="" @click="handleCollect('0')" />
							<img v-else class="collect-icon" src="https://shalong.taiyanyue.top/images/antFill-star1.png" alt=""
								@click="handleCollect('1')" />
						</div>
					</div>
					<!-- 活动名称 -->
					<div class="activityname">
						<div class="name">{{ data.activity_title }}</div>
						<div class="size">{{ data.activity_describe }}</div>
					</div>
				</div>
				<div class="activitytime">
					<!-- 活动时间 -->
					<div class="activity-time">
						<div style="margin-bottom: 12px;" v-for="(item,index) in data.activity_spec_arr" :key="index">
							<div class="activity-time-h">活动时间</div>
							<div class="date-info" style="font-size: 15px;font-weight: 550;">日期：{{ item.activity_at }}</div>
							<div class="date-item">
								<div class="time-slot" v-for="(timeSlot, tIndex) in item.activity_spec_time_arr" :key="tIndex">
									<div class="time-info"
										:class="{ 'selected': selectedTime && selectedTime.dateIndex === index && selectedTime.timeIndex === tIndex }"
										@click="selectTime(index, tIndex, timeSlot)">
										<div class="time">·{{ timeSlot.activity_start_at }}-{{ timeSlot.activity_end_at }}</div>
										<div class="price">￥{{ timeSlot.activity_price }}元/位</div>
									</div>
									<!-- <div class="check-btn">查看</div> -->
								</div>
							</div>
						</div>
					</div>
					<!-- 活动地址 -->
					<div class="address">
						<div class="address-h">活动地址</div>
						<div class="address-h2">{{ data.province_name?data.province_name:'' }} - {{ data.city_name?data.city_name:'' }} - {{ data.area_name?data.area_name:'' }}</div>
						<div class="address-span">{{ data.detailed_address }}</div>
					</div>
				</div>
			</view>
		</scroll-view>
		<view class="footer-container">
			<div style="font-weight: 600;font-size: 18px;">待支付￥{{ monuy }}</div>
			<view class="pay-button" @click="ddqrfun()">立即购买</view>
		</view>
	</view>
</template>

<script>
	import {
		activity_getHomeActivityDetails,
		activity_activityBrowseNumberCreate,
		activity_activityCollectSave,
		order_confirmActivityOrderInfo
	} from '@/api/system/user.js'
	export default {
		data() {
			return {
				// 轮播图数据
				swiperList: [],
				monuy:0,
				isCollected: false, // 收藏状态
				selectedTime: null ,// 选中的时间
				activity_id:"",
				data:{},
				activity_spec_id:''
			}
		},
		onLoad(options) {
			if (options.data) {
				const receivedData = JSON.parse(decodeURIComponent(options.data));
				console.log('接收到的数据:', receivedData);
				this.activity_id=receivedData.activity_id
				if (receivedData.activity_title) {
					uni.setNavigationBarTitle({
						title: decodeURIComponent(receivedData.activity_title)
					});
				}
			}
		},
		onShow() {
			this.activity_activityBrowseNumberCreate()
			this.activity_getHomeActivityDetails()
		},
		methods: {
			async activity_getHomeActivityDetails(){
				const data = await activity_getHomeActivityDetails({activity_id:this.activity_id});
				if(data.code==200){
					this.swiperList = data.content.data.activity_banner_arr;
					this.data = data.content.data;
				}
			},
			async activity_activityBrowseNumberCreate(){
				const data = await activity_activityBrowseNumberCreate({activity_id:this.activity_id})
			},
			async ddqrfun() {
				if(this.monuy==0){
					uni.showToast({
						title: '宝宝请选择活动哦~',
						icon: 'none',
						duration: 1500
					});
				}else{
					let a = {
						activity_id:this.activity_id,
						activity_spec_id:this.activity_spec_id
					}
					const data = await order_confirmActivityOrderInfo(a)
					if(data.code==200){
						let c=data.content.data;
						const params = encodeURIComponent(JSON.stringify(c));
						  uni.navigateTo({
						    url: `/pages/activityConfirmation?data=${params}`
						  });
					} 
				}
			},
			// 收藏/取消收藏
		    async handleCollect(e) {
				const data = await activity_activityCollectSave({activity_id:this.activity_id});
				if(data.code==200){
					if(e==0){
						uni.showToast({
							title: '收藏成功',
							icon: 'none',
							duration: 1500
						});
					}else{
						uni.showToast({
							title: '已取消收藏',
							icon: 'none',
							duration: 1500
						});
					}
				}
				this.activity_getHomeActivityDetails()
			},
			// 选择时间
			selectTime(dateIndex, timeIndex, timeSlot) {
				this.selectedTime = {
					dateIndex,
					timeIndex,
					timeSlot
				};
				this.monuy=timeSlot.activity_price;
				this.activity_spec_id=timeSlot.activity_spec_id;
			}
		}
	}
</script>

<style lang="less" scoped>
	.page-container {
		width: 100%;
		min-height: 100vh;
		background-color: #f4f4f4;
		position: relative;
		padding-bottom: 80px;
		/* 添加与底部栏高度相同的内边距 */
		box-sizing: border-box;
	}

	.scroll-view {
		height: 100%;
	}

	.normal-login-container {
		width: 100%;
		height: 100%;
	}

	.content-container {
		background: #ffffff;
		padding-bottom: 12px;
	}

	.swiper {
		width: 100%;
		height: 350rpx;
	}

	.swiper-image {
		width: 100%;
		height: 100%;
	}

	.mox {
		width: 89%;
		margin-left: 25px;
		display: flex;
		justify-content: space-between;
		padding-top: 10px;
	}

	.tom {
		display: flex;
		color: #a6a6a6;
		font-size: 13px;
	}

	.tom div {
		margin-right: 20px;
	}

	.collect-icon {
		width: 30px;
		height: 30px;
	}

	.activityname {
		width: 89%;
		margin-left: 25px;
		margin-top: 20px;
	}

	.name {
		margin-bottom: 10px;
		font-size: 20px;
		font-weight: 600;
		color: #3e9e6e;
	}

	.size {
		font-size: 13px;
		color: #3e9e6e;
	}

	.activitytime {
		background: #ffffff;
		margin-top: 10px;
		padding-top: 15px;
		padding-bottom: 15px;
	}

	.activity-time {
		width: 89%;
		margin-left: 25px;
	}

	.activity-time-h {
		font-size: 15px;
		color: #a6a6a6;
		font-weight: 500;
		margin-bottom: 6px;
	}

	.date-item {
		margin-bottom: 12px;
	}

	.date-info {
		font-size: 13px;
		margin-bottom: 8px;
	}

	.date-info span {
		font-size: 17px;
		font-weight: 500;
		margin-right: 5px;
	}

	.time-slot {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 8px;
	}

	.time-info {
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex: 1;
		background-color: #f4f4f4;
		border-radius: 4px;
		padding: 8px 12px;
		margin-right: 10px;
		transition: all 0.3s ease;

		&.selected {
			background-color: #3b9c6c;

			.time,
			.price {
				color: #ffffff;
			}
		}
	}

	.time {
		color: #3b9c6c;
		font-size: 13px;
		margin-right: 12px;
	}

	.price {
		color: #3b9c6c;
		font-size: 13px;
	}

	.check-btn {
		background: #3b9c6c;
		color: #ffffff;
		font-size: 13px;
		padding: 6px 12px;
		border-radius: 4px;
		cursor: pointer;
	}

	.address {
		width: 89%;
		margin-left: 25px;
		margin-top: 20px;

		.address-h {
			font-size: 15px;
			color: #a6a6a6;
			font-weight: 500;
			margin-bottom: 6px;
		}

		.address-h2 {
			font-size: 15px;
			font-weight: 550;
			margin-bottom: 6px;
			margin-top: 12px;
		}

		.address-span {
			font-size: 13px;
			color: #a6a6a6;
		}
	}

	/* 固定底部支付区域 */
	.footer-container {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 80px;
		/* 稍微增加高度以适应更多内容 */
		background-color: #ffffff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
		z-index: 999;
		padding: 0 15px;
		box-sizing: border-box;

		.pay-button {
			width: 200px;
			height: 40px;
			background-color: #339966;
			color: #ffffff;
			border-radius: 20px;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 16px;
			font-weight: 500;
		}
	}
</style>